<template>
  <div>
    <table border="1" width="700" style="border-collapse: collapse">
      <caption>
        购物车
      </caption>
      <thead>
        <tr>
          <th>
            <input type="checkbox" @click="allBtn" :checked="all" />
            <span>全选</span>
          </th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>总价</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <shop
          v-for="(item, index) in goodList"
          :key="index"
          :name="item.name"
          :price="item.price"
          :num="item.num"
          :sum="item.num * item.price"
          :bool="item.checked"
          :index="index"
          @addbtn="addbtnFn"
          @delBtn="delbtnFn"
          @reduBtn="reduBtnFn"
          @fnbtn="fnbtnFn"
        />
      </tbody>
      <tfoot>
        <add :total="total" />
      </tfoot>
    </table>
  </div>
</template>

<script>
import shop from "./components/03_shopping";
import add from "./components/04_add";
export default {
  data() {
    return {
      goodList: [
        {
          name: "诸葛亮",
          price: 1000,
          num: 1,
          checked: false,
        },
        {
          name: "蔡文姬",
          price: 1500,
          num: 1,
          checked: false,
        },
        {
          name: "妲己",
          price: 2000,
          num: 1,
          checked: false,
        },
        {
          name: "鲁班",
          price: 2200,
          num: 1,
          checked: false,
        },
      ],
      all: false,
      total: 0,
    };
  },
  components: {
    shop,
    add,
  },
  methods: {
    reduBtnFn(index) {
     this.goodList[index].num > 0 ?  this.goodList[index].num-- : this.goodList[index].num;
      
    },
    fnbtnFn(index) {
      this.goodList[index].num++;
    },
    addbtnFn(index) {
      this.goodList[index].checked = !this.goodList[index].checked;
      this.all = this.goodList.length === this.goodList.reduce((prev,item) => {
          if(item.checked) {
            prev +=1
          }
          // console.log(pr);
          return prev
        },0)
      // this.checked = !this.checked;
      // this.total += this.goodList[index].price * this.goodList[index].num;
      // // console.log(this.goodList[index].checked)
      // console.log(this.total);
      // this.goodList[index].checked === false ?  this.total = 0 : this.total
    },
    allBtn() {
      // console.log(111);
      // this.goodList.checked = true;
      this.all = !this.all;
      this.total = this.goodList.reduce((sum, item) => {
        return (sum += item.price * item.num);
      }, 0);
      console.log(this.total);
      if (this.all === true) {
        this.goodList.forEach((item) => {
          item.checked = true;
        });
      } else {
        this.goodList.forEach((item) => {
          item.checked = false;
        });
        this.total = 0;
      }
    },
    delbtnFn(index) {
      this.goodList.splice(index, 1);
    },
    
  },
  watch: {
    goodList: {
      handler() {
        this.total = this.goodList.reduce((prev,item) => {
          if(item.checked) {
            prev = prev + item.price * item.num
          }
          // console.log(pr);
          return prev
        },0)
        console.log(this.total);
      },
      deep:true
    }
  }
};
</script>

<style>
</style>